<template>
  <div class="dashboard">
    <h2>数据统计</h2>
    <el-table :data="store.urls" v-loading="store.loading">
      <el-table-column prop="short_code" label="短链码" />
      <el-table-column prop="original_url" label="原始链接" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column label="统计">
        <template #default="{ row }">
          <el-button @click="showStats(row.short_code)">
            查看统计
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="访问统计" width="80%">
      <AnalyticsChart v-if="selectedCode" :short-code="selectedCode" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useShortenerStore } from '../store/shortener'
import AnalyticsChart from '../components/AnalyticsChart.vue'

const store = useShortenerStore()
const dialogVisible = ref(false)
const selectedCode = ref('')

const showStats = (code) => {
  selectedCode.value = code
  dialogVisible.value = true
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
</style> 